<template>
	<p
		class="bg-[#F00] rounded-[10px] min-w-[96px] app-font-num text-center text-[10px] text-white flex justify-center items-center h-[12px]">
		<base-image src="activity/clock.svg" class="pr-[2px]" v-if="showIcon" />
		<n-countdown :render="renderCountdown" :duration="time" :onFinish="() => emit('finish')" />
	</p>
</template>

<script setup lang="ts">
import { CountdownProps, NCountdown } from 'naive-ui'
import { BaseImage } from '@/components/base'

defineProps({
	time: Number,
	showIcon: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['finish'])

const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds }) => {
	const d = Math.floor(Number(hours) / 24)
	const h = String(Number(hours) % 24).padStart(2, '0')
	const m = String(minutes).padStart(2, '0')
	const s = String(seconds).padStart(2, '0')
	return `${d ? d + 'd ' : ''}${h}h:${m}m:${s}s`
}
</script>
